<html>
  <head>
    <!--
      <script async defer src="../dist/altcha.js" type="module"></script>
    -->
  </head>

  <body>
    <main>

      <div id="test-render">
        <altcha-widget
          challengeurl=""
        ></altcha-widget>
      </div>

      <div id="test-label">
        <altcha-widget
          challengeurl=""
          strings="{&quot;label&quot;:&quot;custom label&quot;}"
        ></altcha-widget>
      </div>

      <div id="test-hidelogo">
        <altcha-widget
          challengeurl=""
          hidelogo
        ></altcha-widget>
      </div>

      <div id="test-hidefooter">
        <altcha-widget
          challengeurl=""
          hidefooter
        ></altcha-widget>
      </div>

      <div id="test-expire">
        <altcha-widget
          challengeurl=""
          expire="2000"
        ></altcha-widget>
      </div>

      <div id="test-configure">
        <altcha-widget
          id="test-configure-altcha"
        ></altcha-widget>

        <script>
          window.addEventListener('load', () => {
            document.querySelector('#test-configure-altcha').configure({
              hidelogo: true,
              strings: {
                label: 'configured label',
              },
            });
          });
        </script>
      </div>

      <div id="test-verification">
        <form method="post">
          <altcha-widget
            id="test-verification-altcha"
            name="altcha-verification"
          ></altcha-widget>
        </form>

        <script>
          window.addEventListener('load', () => {
            document.querySelector('#test-verification-altcha').configure({
              test: 10,
            });
          });
        </script>
      </div>

      <div id="test-code-challenge">
        <form method="post">
          <altcha-widget
            id="test-code-challenge-altcha"
            name="altcha-code-challenge"
            verifyurl="/verify"
          ></altcha-widget>
        </form>

        <script>
          window.addEventListener('load', () => {
            const challenge ={
                "codeChallenge": {
                    "audio": "/v1/challenge/audio/WTiqG2Ra3aYbyR426xaB-2b0CPdwf_KB2YIGk8yjFo0.mp3",
                    "image": "",
                    "length": 5
                },
                "algorithm": "SHA-256",
                "challenge": "1ac25e8ed79d03a47a3b10bd8e494c2b3503db0cb1597dab7c805caa3bd3654f",
                "maxnumber": 10,
                "salt": "4e5eaaafd360886c8c2e6fb0?edk=ftuop27m6nl9b4kdh7llolnnod&codeChallengeHash=cfdbcb0b9e362c1e6654fdec",
                "signature": "041781384c32dd3aa46ca785ea2dc57c3eb3e604b2b3ee7aeeab59481bbaae6d"
            };
            document.querySelector('#test-code-challenge-altcha').configure({
              challenge,
            });
          });
        </script>
      </div>


    </main>
  </body>
</html>